<template>
    <div>
        <div class="scanCheck">
            <el-form :model="result" label-width="1.5rem" :label-position="'left'" class="form result-form">
                <div class="title">个人信息</div>
                <el-form-item label="姓名">
                    <el-input v-model="result.name" readOnly></el-input>
                </el-form-item>
                <el-form-item label="证件类型">
                    <el-input v-model="result.idType" readOnly></el-input>
                </el-form-item>
                <el-form-item label="证件号码">
                    <el-input v-model="result.cardId" readOnly></el-input>
                </el-form-item>
                <el-form-item label="手机号码">
                    <el-input v-model="result.phone" readOnly></el-input>
                </el-form-item>
                <el-form-item label="详细住址">
                    <el-input v-model="result.address" readOnly></el-input>
                </el-form-item>
            </el-form>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="1.5rem" :show-message="false"
                    :label-position="'top'" class="form">
                <div class="title">登记信息</div>
                <el-form-item label="体温状况" prop="healthStatus">
                    <group class="form-group">
                        <checklist :options="tempList" v-model="ruleForm.healthStatus" class="checklist"
                                :max="1"></checklist>
                    </group>
                </el-form-item>
                <el-form-item label="出入状态" prop="action">
                    <group class="form-group">
                        <checklist :options="actionList" v-model="ruleForm.action" class="checklist" :max="1"></checklist>
                    </group>
                </el-form-item>
            </el-form>
            <div class="submit">
                <el-button type="primary" @click="submitForm()">登记</el-button>
            </div>
        </div>
        <com-buttom></com-buttom>
    </div>
</template>

<script>
    import {Checklist, Toast, Group} from 'vux'
    import comButtom from './buttom'

    export default {
        data() {
            return {
                result: {
                    name: '',
                    idType: '',
                    cardId: '',
                    phone: '',
                    address: '',
                    recordCount: 0 // 扫码记录次数
                },
                ruleForm: {
                    healthStatus: [],
                    action: []
                },
                rules: {
                    action: [
                        {required: true, message: '', trigger: 'change'}
                    ],
                    healthStatus: [
                        {required: true, message: '', trigger: 'change'}
                    ]
                },
                tempList: [
                    {key: '1', value: '正常'},
                    {key: '2', value: '异常'}
                ],
                actionList: [
                    {key: '2', value: '出'},
                    {key: '1', value: '入'}
                ],
                tk: ''
            }
        },
        mounted() {
            if (this.$route.query.qrresult) this.tk = this.$route.query.qrresult
            this.init()
        },
        methods: {
            init() {
                this.$vux.loading.show()
                this.$http.post('/recorder/recordInfo?tk=' + this.tk).then(result => {
                    if (result.success && result.data) {
                        this.result = {
                            name: result.data.name,
                            idType: '身份证',
                            cardId: result.data.cardId,
                            phone: result.data.phone,
                            address: result.data.addrLocal,
                            recordCount: result.data.recordCount
                        }
                        this.$vux.loading.hide()
                    }
                })
            },
            validate(formName, callback) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (callback) callback()
                    } else {
                        this.$vux.toast.text('请完善登记信息', 'middle')
                        return false
                    }
                })
            },
            submitForm(formName) {
                this.validate('ruleForm', () => {
                    this.$http.post('/recorder/takeRecord?tk=' + this.tk, {
                        action: this.ruleForm.action[0], // 进出
                        healthStatus: this.ruleForm.healthStatus[0], // 健康状态
                        recordAddr: '', // 记录地点
                        strategy: 1 // 执行策略
                    }).then(result => {
                        if (result.success) {
                            this.$vux.alert.show({
                                content: '登记成功',
                                onShow() {
                                },
                                onHide() {
                                    history.back()
                                }
                            })
                        }
                    })
                })
            }
        },
        components: {
            Checklist,
            Toast,
            Group,
            comButtom
        }
    }
</script>

<style scoped lang="less">
    .scanCheck {
        background-color: #f4f4f4;
        height: 100%;
        width: 100%;
        overflow-x: hidden;
        overflow-y: auto;

        .title {
            line-height: .76rem;
            padding: 0 .2rem;
            color: #999;

            &.mt {
                margin-top: -.15rem;
            }
        }
    }

    .form {
        /deep/ .el-form-item {
            font-size: .28rem;
            background-color: #fff;
            margin-bottom: .15rem;
            padding: .1rem 0;

            .el-form-item__label {
                color: #333;
                padding: 0 0 0 .2rem;
                font-size: .28rem;
                line-height: .48rem;
                margin-bottom: .1rem;
            }

            .el-form-item__content {
                font-size: .28rem;
                line-height: .5rem;
            }

            .selector {
                padding: .1rem .2rem;
                line-height: .48rem;

                .weui-select {
                    padding-left: 0;
                    height: .48rem;
                    line-height: .48rem;
                    font-size: .28rem;
                }
            }

            .weui-cells_checkbox {
                .weui-icon-checked {
                    &:before {
                        font-size: .34rem;
                    }
                }

                .weui-check:checked + .vux-checklist-icon-checked {
                    &:before {
                        color: #409EFF;
                    }
                }
            }

            .el-input {
                font-size: .28rem;

                input {
                    padding: 0 .2rem;
                    border: 0 none;
                    height: .68rem;
                    line-height: .68rem;
                    border-radius: 2px;
                    /*border-color: rgba(255, 184, 203);*/
                }
            }

            .el-button {
                font-size: .28rem;
            }

            .form-group {
                .weui-cells {
                    &:before, &:after {
                        border: 0 none;
                    }

                    margin-top: 0;
                    font-size: .28rem;

                    .weui-cell {
                        padding: .15rem .2rem;

                        &:before {
                            border: 0 none;
                        }
                    }

                    .vux-cell-value {
                        color: inherit;
                    }
                }
            }

            &.is-error {
                input {
                    /*background-color: rgba(255, 184, 203, .3);*/
                    /*border: 1px solid rgba(255, 184, 203);*/
                }
            }
        }
    }

    .result-form {
        /deep/ .el-form-item {
            .el-form-item__label {
                line-height: .68rem;
                margin-bottom: 0;
            }
        }
    }

    .submit {
        padding: .2rem;

        .el-button {
            display: block;
            width: 100%;
        }
    }
</style>
